import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

//导入路由组件
const  Recommend = () => import('../pages/recommend/recommend')
const  Rank = () => import('../pages/rank/rank')
const  Search = () => import('../pages/search/search')
const  Singer = () => import('../pages/singer/singer')
const  SingrDetail = () => import('../components/singer-detail/singer-detail.vue')
const  Dsic = () => import('../components/disc/disc.vue')
const  TopList = () => import('../components/top-list/top-list.vue')
export default new Router({
  routes: [
    {
      path:'/',
      redirect:'/recommend'
    },
    {
      path:'/recommend',
      component: Recommend,
      children:[
        {
          path:':id',
          component:Dsic
        }
      ]
    },
     {
      path:'/rank',
      component: Rank,
      children:[
        {
          path:':id',
          component: TopList
        }
      ]
    },
     {
      path:'/search',
      component: Search,
      children:[
        {
          path:':id',//代表传入了id变量，跳转到不同的
          component: SingrDetail
        }
      ]
    },
     {
      path:'/singer',
      component: Singer,
      children:[
        {
          path:':id',//代表传入了id变量，跳转到不同的
          component: SingrDetail
        }
      ]
    },
    {
      path:'/user',
      component: () => import('../components/user-center/user-center.vue')
       
    }
  ],
  linkActiveClass: 'on'// 这是覆盖默认的路由高亮的类，默认的类叫做router-link-active
})
